<script lang="ts" setup>
// 导入系统部门 API 类型
import type { SystemDeptApi } from '#/api/system/dept';

// 从 Vue 导入 ref 函数，用于创建响应式数据
import { ref } from 'vue';

// 从 @vben/common-ui 导入确认弹窗、文档提示、页面组件和模态框钩子
import { Page } from '@vben/common-ui';

// 从 antd 导入卡片组件和消息提示组件
import { Card } from 'ant-design-vue';

// 导入部门树组件
import DeptTree from './modules/dept-tree.vue';
import Descriptions from './modules/descriptions.vue';

/**
 * 搜索部门 ID 响应式变量
 * @type {Ref<number | undefined>}
 */
const searchDeptId = ref<number | undefined>(undefined);

/**
 * 处理部门选择事件
 * @param {SystemDeptApi.Dept} dept - 选中的部门对象
 */
async function handleDeptSelect(dept: SystemDeptApi.Dept) {
    searchDeptId.value = dept.id;
    console.log('选中的部门:', dept.id);
}

/**
 * 记录选中用户的 ID 数组
 * @type {Ref<number[]>}
 */
</script>

<template>
    <!-- 页面组件，自动设置内容高度 -->
    <Page auto-content-height>
        <!-- 弹性布局容器 -->
        <div class="flex h-full w-full">
            <!-- 左侧部门树卡片 -->
            <Card class="mr-4 h-full w-1/5  overflow-auto">
                <!-- 部门树组件，选择部门时触发 handleDeptSelect 函数 -->
                <DeptTree @select="handleDeptSelect" />
            </Card>
            <!-- 右侧用户列表区域 -->
            <div class="w-4/5">
                <Card class="w-6/6 mr-4 h-full">
                    <Descriptions :dept-id="searchDeptId" />
                </Card>
            </div>
        </div>
    </Page>
</template>
